import "./App.css"
import { useState, useRef } from "react";

function App() {

    const [imgurl, setImgurl] = useState(null) // 图片地址
    const promptRef = useRef(null) // 输入框

    function generateImage() { // 生成图片
        const negative_prompt = "Blurry, Bad, Bad anatomy, Bad proportions, Deformed, Disconnected limbs, Disfigured, Extra arms, Extra limbs, Extra hands, Fused fingers, Gross proportions, Long neck, Malformed limbs, Mutated, Mutated hands, Mutated limbs, Missing arms, Missing fingers, Poorly drawn hands, Poorly drawn face."
        const endpoint = 'kelingai/v1/images/generations'
        fetch('/api')
            .then(response => response.text())
            .then(token => {
                // 此处可继续后续使用 token 的逻辑
                console.log('Token:', token);
                const payload = {
                    prompt: promptRef.current.value, // 输入框内容
                    negative_prompt: negative_prompt, // 负提示词
                    model_name: "kling-v1",
                    aspect_ratio: "1:1", // 宽高比
                }
                const headers = { // 请求头
                    'Authorization': `Bearer ${token}`, // 鉴权
                    'Content-Type': 'application/json', // 内容类型
                }
                fetch(endpoint, { // 请求
                    method: 'POST', // 请求方法
                    headers: headers, // 请求头
                    body: JSON.stringify(payload), // 请求体
                }).then(response => response.json()) // 响应
                    .then(data => { // 响应体
                        console.log(data); // 打印响应体
                        setImgurl(data.data[0].url) // 设置图片地址
                    })
            });
    }
    return (
        <div className="container">
            <div>
                <label htmlFor="">Prompt:</label>
                <button onClick={generateImage}>生成</button>
                <textarea className="prompt-textarea" ref={promptRef}></textarea>
            </div>
            <div className="output">
                <img src={imgurl} alt="" />
            </div>
        </div>
    )
}
export default App;